<template>
  <div class="recursionComment">
    <!-- 递归评论组件：
        该组件内部递归地引用自身来实现评论的嵌套显示 
    -->
    <comment
      v-for="item in props.needComment"
      :key="item.id"
      :comment="item"
      :all-comment="props.allComment"
    ></comment>
    <!-- 
        因为返回的数据是扁平化的，不是树形数据
        即每条评论都包含其父级评论的信息（通过commentId字段关联）
        必须有一个all-comment数据来记录原始所有的数据，
        通过这个数据用filter来过滤commentId出要显示的数据，也即needComment
        如果没保留原始数据，有可能在一开始就把深层次需要展示的数据过滤掉了
 
        如果是直接返回递归状的树形结构，就不需要，
        因为不需要筛选，通过children字段有无来判断是否递归显示
     -->
  </div>
</template>

<script setup lang="ts">
import comment from "./comment.vue"
interface IProps {
  needComment: IComment[]
  allComment: IComment[]
}

interface IComment {
  id: number
  commentId: number | null
  content: string
  createAt: string
  updateAt: string
  user: any
}

const props = withDefaults(defineProps<IProps>(), {})
</script>

<style lang="less" scoped>
.recursionComment {
}
</style>
